<template>
  <div class="dress">
    <div class="dresstop">
      <h2 @click="$router.push({path:'/me'})" style="cursor:pointer;">&lt;</h2>
      <h2>我的地址</h2>
      <font></font>
    </div>
    <div class="itemlist">
      <div class="dresslist" v-for="item,index in $store.state.dresslist">
        <label :for="index">
           <font style="display:flex;align-items:center;">
          <input type="radio" :id='index' name='dress' :value='index' v-model='radiovalue'>
          <h4>{{item.dressname}} {{item.dresssex}}</h4>
          <h4 style="color:gray;">{{item.dressphone}}</h4>
        </font>
        <h3 style="color:gray;">{{item.dresslou}} {{item.dresssu}}</h3>
        </label>
        <div class="ctrl">
          <el-button type="primary" icon="el-icon-edit" @click="changedress(index)" circle></el-button>
          <el-button type="danger" icon="el-icon-delete" @click="deldress(index)" circle></el-button>
        </div>

      </div>
    </div>
    <div class="dressbottom" @click='$router.push("/address")'>
      <font>
        <i class="iconfont icon-icontianjia" style="font-size:20px;"></i>
        &emsp;
        <button
          style="outline:none;border:none;background:none;color:rgb(0, 166, 255);font-size:20px;"
        >新增收货地址</button>
      </font>
    </div>
  </div>
</template>

<script>
import {mapMutations} from 'vuex'
export default {
  name: "dress",
  data(){
      return{
          radiovalue:-1
      }
  },
  methods:{
      ...mapMutations(['setdress','setdresslist','loginsetdress']),
      dress(value){
          this.$store.commit('setdress',value)
      },
      changedress(e){
        this.$router.push({path:'/changedress',query:{id:e}})
      },
      deldress(e){
        var sure='';
        if(e==this.$store.state.dresslist.indexOf(this.$store.state.dress)){
            sure=true;
          }else{
          sure=false;
        }
        this.axios.post('http://127.0.0.1:3000/deldress',{index:e,phone:this.$store.state.phone,sure:sure})
        .then((res)=>{
          if(res.data.msg==200){
            if(sure){
              this.$store.state.dresslist.splice(e,1);
              var dress='';
              this.$store.commit('loginsetdress',dress)
            }else{
              this.$store.state.dresslist.splice(e,1);
            }
          }else{
            console.log('删除失败')
          }
        })
        .catch((err)=>{
          console.log(err+'删除失败')
        });
      }
  },
  watch:{
      radiovalue(after,before){
          this.axios.post('http://127.0.0.1:3000/dress',{id:after,phone:this.$store.state.phone})
          .then((res)=>{
              if(res.data.msg==200){
                this.dress(after)
              }else{
                '当前地址更改失败'
              }
        })
          .catch((err)=>{
            console.log(err)
          })

      }
  },
  created(){
    var dresslist=this.$store.state.dresslist;
    var dress=this.$store.state.dress;
    this.radiovalue=dresslist.indexOf(dress)
  }
};
</script>

<style scoped>
.dress{
    top: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color:rgb(245,245,245);
}
.itemlist{
    width: 100%;
    height: 81%;
    position: absolute;
    overflow: auto;
}
.dresslist {
  background-color:white;
  padding: 10px;
  border-bottom: 1px solid gainsboro;
  display: flex;
  justify-content: space-between;
  align-content: center;
}
.dresstop {
  background-color:rgb(0,162,255) ;
  color: white;
  height: 9%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.dressbottom {
  width: 100%;
  position: absolute;
  bottom: 0;
  border: 1px solid;
  height:9%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: rgb(0, 166, 255);

}
</style>
